<style>
    #goods-update {
        padding: 20px 30px 0 0;
    }

    #goods-update .layui-textarea, #goods-update .layui-input {
        border-radius: 4px !important;
    }
</style>
<div class="layui-fluid" id="goods-update">
    <form class="layui-form" action="" lay-filter="goods-update-form">
        <div class="layui-form-item">
            <label class="layui-form-label ebe-required">分类名：</label>
            <div class="layui-input-block">
                <input type="text" name="categoryName" minlength="2" maxlength="10"
                       lay-verify="required|range" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ebe-required">分类图片：</label>
            <div class="layui-input-block" style="height: 160px" >
                <ul class="upload-ul clearfix"></ul>
                <div class="upload-pick" id="categoryImg"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ebe-required">状态：</label>
            <div class="layui-input-block">
                <input type="checkbox" name="status" value="1" lay-skin="switch" lay-text="启用|禁用" checked>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序：</label>
            <div class="layui-input-block">
                <input type="number" name="sortOrder" autocomplete="off" placeholder="如：1" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">描述：</label>
            <div class="layui-input-block">
                <textarea type="text" name="description" minlength="2" maxlength="200"
                          lay-verify="range" autocomplete="off" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item layui-ebe-btn ebe-hide">
            <button class="layui-btn ebe-layer-btn" lay-submit="" lay-filter="goods-update-form-submit" id="submit">提交</button>
            <button type="reset" class="layui-btn ebe-layer-btn layui-btn-primary" id="reset">重置</button>
        </div>
    </form>
</div>
<script data-th-inline="javascript">
    layui.use(['layuimini', 'form', 'validate', 'table',  'diyUploader'], function () {
        let $ = layui.jquery,
            diyUploader = layui.diyUploader,
            table = layui.table,
            layuimini = layui.layuimini,
            categoryGoods = [[${categoryGoods}]],
            form = layui.form,
            validate = layui.validate;

        form.verify(validate);
        form.render();
        initValue();
        //上传图片
        let $imgUpload = diyUploader.diyUpload({
            pick: {
                id: $("#categoryImg"),
                multiple: false
            },
            server: '/category/goods/image',
            fileVal: "imgFile",
            //队列数
            fileNumLimit: 1,
            initFileUrl: categoryGoods.categoryImg,
        });
        // 修正更新的图片数据校验
        categoryGoods.categoryImg = layuimini.subImageName(categoryGoods.categoryImg);

        form.on('submit(goods-update-form-submit)', function (data) {
            let params = updateParams(data.field);
            if (layuimini.nativeEqual(params, categoryGoods)) {
                layuimini.alert.warn('数据未作任何修改！');
                return false;
            }
            layuimini.put('/category/goods', params, function () {
                layer.closeAll();
                layuimini.alert.success('修改分类成功!');
                table.reload('goodsTable', {
                    where: {key:{field:data.field}}
                }, 'data');
            });
            return false;
        });
        function initValue() {
            form.val("goods-update-form", {
                "categoryName": categoryGoods.categoryName,
                "sortOrder": categoryGoods.sortOrder,
                "status": categoryGoods.status,
                "description": categoryGoods.description,
            });
        }
        function updateParams(data) {
            let file = $imgUpload.getFiles('complete');
            let params = {
                categoryId:categoryGoods.categoryId,
                categoryName: data.categoryName.trim(),
                sortOrder: data.sortOrder.trim(),
                description: data.description.trim(),
            };
            if (data.status === '1') {
                params.status = data.status;
            } else {
                params.status = 0;
            }
            if (file.length !== 0) {
                params.categoryImg = file[0].name;
            } else {
                params.categoryImg = "";
            }
            return params;
        }
    });
</script>
